<template name="rate">
	<div class="rate">
		<span>☆☆☆☆☆</span>
		<div class="hollow" :style="style">
			★★★★★
		</div>
	</div>
</template>
<script>
	export default{
		props:{
			value:{
				type:[Number,String],
				default:'0'
			}
		},
		computed:{
			style(){
				return `width:${120*this.value/10}rpx`
			}
		}
	}
</script>
<style lang="scss" scoped>
	.rate{
		position:relative;
		display:inline-block;
		width:120rpx;
		margin-right:20rpx;
		span{
			color:#e7e97d;
		}
		.hollow{
			position:absolute;
			display:inline-block;
			top:0;
			left:0;
			overflow:hidden;
			color:#e7e97d;
		}
	}
</style>